<template>
  <div class="banners-view">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="title-section">
          <h2 class="page-title">
            <i class="el-icon-picture-outline"></i>
            轮播图管理
          </h2>
          <p class="page-subtitle">管理首页轮播图展示内容</p>
        </div>
        <el-button type="primary" size="large" @click="showAddDialog" class="add-btn">
          <i class="el-icon-plus"></i>
          添加轮播图
        </el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon active">
          <i class="el-icon-check"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.activeCount }}</div>
          <div class="stat-label">启用中</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon inactive">
          <i class="el-icon-close"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.inactiveCount }}</div>
          <div class="stat-label">已禁用</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon total">
          <i class="el-icon-picture"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.totalCount }}</div>
          <div class="stat-label">总计</div>
        </div>
      </div>
    </div>

    <!-- 搜索栏 -->
    <div class="search-section">
      <div class="search-card">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="标题">
            <el-input 
              v-model="searchForm.title" 
              placeholder="请输入标题关键词" 
              clearable
              prefix-icon="el-icon-search"
            />
          </el-form-item>
          <el-form-item style="width: 200px;" label="状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
              <el-option label="启用" :value="1">
                <i class="el-icon-check status-icon active"></i>
                启用
              </el-option>
              <el-option label="禁用" :value="0">
                <i class="el-icon-close status-icon inactive"></i>
                禁用
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width: 200px;" label="跳转类型">
            <el-select v-model="searchForm.linkType" placeholder="请选择跳转类型" clearable>
              <el-option label="无跳转" value="none">
                <i class="el-icon-minus link-icon"></i>
                无跳转
              </el-option>
              <el-option label="商品详情" value="product">
                <i class="el-icon-goods link-icon product"></i>
                商品详情
              </el-option>
              <el-option label="分类页面" value="category">
                <i class="el-icon-menu link-icon category"></i>
                分类页面
              </el-option>
              <el-option label="外部链接" value="url">
                <i class="el-icon-link link-icon url"></i>
                外部链接
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch" class="search-btn">
              <i class="el-icon-search"></i>
              搜索
            </el-button>
            <el-button @click="resetSearch" class="reset-btn">
              <i class="el-icon-refresh"></i>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-section">
      <div class="table-card">
        <div class="table-header">
          <div class="table-title">
            <i class="el-icon-document"></i>
            轮播图列表
          </div>
          <div class="table-actions">
            <el-button 
              size="small" 
              type="danger" 
              @click="handleBatchDelete"
              :disabled="selectedIds.length === 0"
            >
              <i class="el-icon-delete"></i>
              批量删除 ({{ selectedIds.length }})
            </el-button>
            <el-button 
              size="small" 
              type="info" 
              @click="clearSelection"
              :disabled="selectedIds.length === 0"
            >
              <i class="el-icon-close"></i>
              清空选择
            </el-button>
            <el-button size="small" @click="loadBanners" :loading="loading">
              <i class="el-icon-refresh"></i>
              刷新
            </el-button>
          </div>
        </div>
        
        <el-table 
          :data="bannerList" 
          v-loading="loading" 
          border
          stripe
          class="banner-table"
          :header-cell-style="{ background: '#f8f9fa', color: '#606266' }"
          @selection-change="handleSelectionChange"
          @select-all="handleSelectAll"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="ID" width="80" align="center" />
          <el-table-column label="图片" width="140" align="center">
            <template #default="{ row }">
              <div class="image-cell">
                <el-image 
                  :src="row.imageUrl" 
                  :preview-src-list="[row.imageUrl]"
                  fit="cover"
                  class="banner-image"
                  :initial-index="0"
                >
                  <template #error>
                    <div class="image-error">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </template>
                </el-image>
                <div class="image-overlay">
                  <el-button size="mini" type="primary" @click="previewImage(row.imageUrl)">
                    <i class="el-icon-zoom-in"></i>
                  </el-button>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" min-width="150">
            <template #default="{ row }">
              <div class="title-cell">
                <span class="title-text">{{ row.title }}</span>
                <el-tag v-if="row.description" size="mini" type="info" class="description-tag">
                  {{ row.description }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="linkType" label="跳转类型" width="120" align="center">
            <template #default="{ row }">
              <el-tag :type="getLinkTypeTag(row.linkType)" size="medium" class="link-type-tag">
                <i :class="getLinkTypeIcon(row.linkType)"></i>
                {{ getLinkTypeText(row.linkType) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="sortOrder" label="排序" width="100" align="center">
            <template #default="{ row }">
              <el-tag type="warning" size="medium">{{ row.sortOrder }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template #default="{ row }">
              <el-switch
                v-model="row.status"
                :active-value="1"
                :inactive-value="0"
                @change="handleStatusChange(row)"
                active-color="#67c23a"
                inactive-color="#f56c6c"
              />
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180" align="center">
            <template #default="{ row }">
              <div class="time-cell">
                <div class="time-text">{{ formatDateTime(row.createTime) }}</div>
                <div class="time-diff">{{ getTimeDiff(row.createTime) }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right" align="center">
            <template #default="{ row }">
              <div class="action-buttons">
                <el-button 
                  size="small" 
                  type="primary" 
                  @click="showEditDialog(row)"
                  class="edit-btn"
                >
                  <i class="el-icon-edit"></i>
                  编辑
                </el-button>
                <el-button 
                  size="small" 
                  type="danger" 
                  @click="handleDelete(row)"
                  class="delete-btn"
                >
                  <i class="el-icon-delete"></i>
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-wrapper">
          <el-pagination
            v-model:current-page="pagination.current"
            v-model:page-size="pagination.size"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            class="pagination"
          />
        </div>
      </div>
    </div>

    <!-- 添加/编辑对话框 -->
    <el-dialog 
      :title="dialogTitle" 
      v-model="dialogVisible" 
      width="700px"
      @close="resetForm"
      class="banner-dialog"
      :close-on-click-modal="false"
    >
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="banner-form">
        <div class="form-section">
          <h3 class="section-title">基本信息</h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入轮播图标题" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" prop="status">
                <el-radio-group v-model="form.status">
                  <el-radio :label="1">
                    <i class="el-icon-check status-icon active"></i>
                    启用
                  </el-radio>
                  <el-radio :label="0">
                    <i class="el-icon-close status-icon inactive"></i>
                    禁用
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="轮播图片" prop="imageUrl">
            <ImageUploadCropper
              v-model:imageUrl="form.imageUrl"
              aspect-ratio="750:300"
              hint="建议尺寸: 750x300px, 支持 JPG、PNG 格式，将进行裁剪"
            />
          </el-form-item>
          
          <el-form-item label="描述">
            <el-input 
              v-model="form.description" 
              type="textarea" 
              :rows="3"
              placeholder="请输入描述信息" 
            />
          </el-form-item>
        </div>

        <div class="form-section">
          <h3 class="section-title">跳转设置</h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="跳转类型" prop="linkType">
                <el-select v-model="form.linkType" placeholder="请选择跳转类型" style="width: 100%" @change="handleLinkTypeChange">
                  <el-option label="无跳转" value="none">
                    <i class="el-icon-minus link-icon"></i>
                    无跳转
                  </el-option>
                  <el-option label="商品详情" value="product">
                    <i class="el-icon-goods link-icon product"></i>
                    商品详情
                  </el-option>
                  <el-option label="分类页面" value="category">
                    <i class="el-icon-menu link-icon category"></i>
                    分类页面
                  </el-option>
                  <el-option label="外部链接" value="url">
                    <i class="el-icon-link link-icon url"></i>
                    外部链接
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排序权重" prop="sortOrder">
                <el-input-number v-model="form.sortOrder" :min="0" :max="999" style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="跳转目标" v-if="form.linkType !== 'none'">
            <el-input 
              v-if="form.linkType === 'url'" 
              v-model="form.linkUrl" 
              placeholder="请输入外部链接URL" 
            />
            <el-select 
              v-else 
              v-model="form.linkId" 
              :placeholder="`请选择${form.linkType === 'product' ? '商品' : '分类'}`"
              style="width: 100%"
              :loading="linkTargetData.loading"
            >
              <el-option 
                v-for="option in getLinkTargetOptions()"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false" size="large">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitting" size="large">
            <i class="el-icon-check"></i>
            {{ isEdit ? '更新' : '添加' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { bannerApi } from '@/api/banners'
import { pageProducts } from '@/api/products'
import { pageCategories } from '@/api/categories'
import ImageUploadCropper from '@/components/ImageUploadCropper.vue'
import { useTokenStore } from '@/stores/useTokenStore'


    const loading = ref(false)
    const submitting = ref(false)
    const dialogVisible = ref(false)
    const isEdit = ref(false)
    const formRef = ref()

    // 搜索表单
    const searchForm = reactive({
      title: '',
      status: null,
      linkType: ''
    })

    // 分页信息
    const pagination = reactive({
      current: 1,
      size: 10,
      total: 0
    })

    // 轮播图列表
    const bannerList = ref([])

    // 统计数据
    const stats = reactive({
      activeCount: 0,
      inactiveCount: 0,
      totalCount: 0
    })

    // 选中的轮播图ID列表
    const selectedIds = ref([])

    // 表单数据
    const form = reactive({
      id: null,
      title: '',
      imageUrl: '',
      linkUrl: '',
      linkType: 'none',
      linkId: null,
      sortOrder: 0,
      status: 1,
      description: ''
    })

    // 跳转目标数据
    const linkTargetData = reactive({
      products: [], // 商品列表
      categories: [], // 分类列表
      loading: false
    })

    // 表单验证规则
    const rules = {
      title: [
        { required: true, message: '请输入轮播图标题', trigger: 'blur' }
      ],
      imageUrl: [
        { required: true, message: '请上传轮播图片', trigger: 'change' }
      ],
      status: [
        { required: true, message: '请选择状态', trigger: 'change' }
      ]
    }

    // 获取轮播图列表
    const loadBanners = async () => {
      try {
        loading.value = true
        const params = {
          current: pagination.current,
          size: pagination.size,
          ...searchForm
        }
        const res = await bannerApi.getBannerPage(params)
        if (res.code === 200) {
          bannerList.value = res.data.items || []
          pagination.total = res.data.total || 0
          updateStats()
        }
      } catch (error) {
        console.error('加载轮播图列表失败:', error)
        ElMessage.error('加载失败')
      } finally {
        loading.value = false
      }
    }

    // 获取商品列表
    const loadProducts = async () => {
      try {
        linkTargetData.loading = true
        const res = await pageProducts({ current: 1, size: 1000 })
        if (res.code === 200) {
          linkTargetData.products = res.data.items || []
        }
      } catch (error) {
        console.error('加载商品列表失败:', error)
        ElMessage.error('加载商品列表失败')
        // 使用模拟数据作为备选
        linkTargetData.products = [
          { id: 1, name: '商品1' },
          { id: 2, name: '商品2' },
          { id: 3, name: '商品3' }
        ]
      } finally {
        linkTargetData.loading = false
      }
    }

    // 获取分类列表
    const loadCategories = async () => {
      try {
        linkTargetData.loading = true
        const res = await pageCategories({ current: 1, size: 1000 })
        if (res.code === 200) {
          linkTargetData.categories = res.data.items || []
        }
      } catch (error) {
        console.error('加载分类列表失败:', error)
        ElMessage.error('加载分类列表失败')
        // 使用模拟数据作为备选
        linkTargetData.categories = [
          { id: 1, name: '分类1' },
          { id: 2, name: '分类2' },
          { id: 3, name: '分类3' }
        ]
      } finally {
        linkTargetData.loading = false
      }
    }

    // 更新统计数据
    const updateStats = () => {
      const active = bannerList.value.filter(item => item.status === 1).length
      const inactive = bannerList.value.filter(item => item.status === 0).length
      stats.activeCount = active
      stats.inactiveCount = inactive
      stats.totalCount = bannerList.value.length
    }

    // 搜索
    const handleSearch = () => {
      pagination.current = 1
      loadBanners()
    }

    // 重置搜索
    const resetSearch = () => {
      Object.assign(searchForm, {
        title: '',
        status: null,
        linkType: ''
      })
      handleSearch()
    }

    // 分页处理
    const handleSizeChange = (size) => {
      pagination.size = size
      loadBanners()
    }

    const handleCurrentChange = (current) => {
      pagination.current = current
      loadBanners()
    }

    // 显示添加对话框
    const showAddDialog = () => {
      isEdit.value = false
      dialogVisible.value = true
    }

    // 显示编辑对话框
    const showEditDialog = (row) => {
      isEdit.value = true
      Object.assign(form, row)
      dialogVisible.value = true
      // 根据跳转类型加载相应数据
      if (form.linkType === 'product') {
        loadProducts()
      } else if (form.linkType === 'category') {
        loadCategories()
      }
    }

    // 监听跳转类型变化
    const handleLinkTypeChange = () => {
      form.linkId = null
      if (form.linkType === 'product') {
        loadProducts()
      } else if (form.linkType === 'category') {
        loadCategories()
      }
    }

    // 提交表单
    const handleSubmit = async () => {
      try {
        await formRef.value.validate()
        submitting.value = true
        
        const api = isEdit.value ? bannerApi.updateBanner : bannerApi.addBanner
        const res = await api(form)
        
        if (res.code === 200) {
          ElMessage.success(isEdit.value ? '更新成功' : '添加成功')
          dialogVisible.value = false
          loadBanners()
        }
      } catch (error) {
        console.error('提交失败:', error)
        ElMessage.error('操作失败')
      } finally {
        submitting.value = false
      }
    }

    // 删除轮播图
    const handleDelete = async (row) => {
      try {
        await ElMessageBox.confirm('确定要删除这个轮播图吗？', '提示', {
          type: 'warning',
          confirmButtonText: '确定删除',
          cancelButtonText: '取消'
        })
        
        const res = await bannerApi.deleteBanner(row.id)
        if (res.code === 200) {
          ElMessage.success('删除成功')
          loadBanners()
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除失败:', error)
          ElMessage.error('删除失败')
        }
      }
    }

    // 批量删除轮播图
    const handleBatchDelete = async () => {
      if (selectedIds.value.length === 0) {
        ElMessage.warning('请选择要删除的轮播图')
        return
      }

      try {
        await ElMessageBox.confirm(`确定要删除选中的 ${selectedIds.value.length} 个轮播图吗？`, '提示', {
          type: 'warning',
          confirmButtonText: '确定删除',
          cancelButtonText: '取消'
        })
        
        const res = await bannerApi.deleteBanners(selectedIds.value)
        if (res.code === 200) {
          ElMessage.success('批量删除成功')
          selectedIds.value = []
          loadBanners()
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('批量删除失败:', error)
          ElMessage.error('批量删除失败')
        }
      }
    }

    // 处理选择变化
    const handleSelectionChange = (selection) => {
      selectedIds.value = selection.map(item => item.id)
    }

    // 全选/取消全选
    const handleSelectAll = (selection) => {
      if (selection.length === 0) {
        // 取消全选
        selectedIds.value = []
      } else {
        // 全选
        selectedIds.value = bannerList.value.map(item => item.id)
      }
    }

    // 清空选择
    const clearSelection = () => {
      selectedIds.value = []
      // 清空表格选择
      const tableRef = document.querySelector('.banner-table')
      if (tableRef) {
        tableRef.clearSelection()
      }
    }

    // 获取跳转目标选项
    const getLinkTargetOptions = () => {
      if (form.linkType === 'product') {
        return linkTargetData.products.map(item => ({
          label: item.name,
          value: item.id
        }))
      } else if (form.linkType === 'category') {
        return linkTargetData.categories.map(item => ({
          label: item.name,
          value: item.id
        }))
      }
      return []
    }

    // 状态变更
    const handleStatusChange = async (row) => {
      try {
        const res = await bannerApi.updateBannerStatus(row.id, row.status)
        if (res.code === 200) {
          ElMessage.success('状态更新成功')
          updateStats()
        } else {
          // 恢复原状态
          row.status = row.status === 1 ? 0 : 1
        }
      } catch (error) {
        console.error('状态更新失败:', error)
        ElMessage.error('状态更新失败')
        // 恢复原状态
        row.status = row.status === 1 ? 0 : 1
      }
    }

    // 重置表单
    const resetForm = () => {
      Object.assign(form, {
        id: null,
        title: '',
        imageUrl: '',
        linkUrl: '',
        linkType: 'none',
        linkId: null,
        sortOrder: 0,
        status: 1,
        description: ''
      })
      formRef.value?.resetFields()
    }

    // 预览图片 (表格中的图片预览)
    const previewImage = (url) => {
      // 使用Element Plus的图片预览功能
      const image = new Image()
      image.src = url
      image.onload = () => {
        // 图片加载成功，可以预览
      }
      image.onerror = () => {
        ElMessage.warning('图片加载失败')
      }
    }

    // 工具函数
    const getLinkTypeText = (type) => {
      const map = {
        none: '无跳转',
        product: '商品详情',
        category: '分类页面',
        url: '外部链接'
      }
      return map[type] || type
    }

    const getLinkTypeTag = (type) => {
      const map = {
        none: '',
        product: 'success',
        category: 'warning',
        url: 'info'
      }
      return map[type] || ''
    }

    const getLinkTypeIcon = (type) => {
      const map = {
        none: 'el-icon-minus',
        product: 'el-icon-goods',
        category: 'el-icon-menu',
        url: 'el-icon-link'
      }
      return map[type] || 'el-icon-minus'
    }

    const formatDateTime = (dateTime) => {
      if (!dateTime) return ''
      return new Date(dateTime).toLocaleString()
    }

    const getTimeDiff = (dateTime) => {
      if (!dateTime) return ''
      const now = new Date()
      const time = new Date(dateTime)
      const diff = now - time
      const days = Math.floor(diff / (1000 * 60 * 60 * 24))
      if (days > 0) {
        return `${days}天前`
      }
      const hours = Math.floor(diff / (1000 * 60 * 60))
      if (hours > 0) {
        return `${hours}小时前`
      }
      const minutes = Math.floor(diff / (1000 * 60))
      if (minutes > 0) {
        return `${minutes}分钟前`
      }
      return '刚刚'
    }

    const dialogTitle = computed(() => isEdit.value ? '编辑轮播图' : '添加轮播图')

    onMounted(() => {
      loadBanners()
      // 预加载商品和分类数据
      loadProducts()
      loadCategories()
    })
</script>

<style scoped>
.banners-view {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  margin-bottom: 24px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 24px 32px;
  border-radius: 12px;
  color: white;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.title-section {
  display: flex;
  flex-direction: column;
}

.page-title {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-subtitle {
  margin: 0;
  opacity: 0.9;
  font-size: 14px;
}

.add-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.add-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* 统计卡片 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-icon.active {
  background: linear-gradient(135deg, #67c23a, #85ce61);
}

.stat-icon.inactive {
  background: linear-gradient(135deg, #f56c6c, #f78989);
}

.stat-icon.total {
  background: linear-gradient(135deg, #409eff, #66b1ff);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  color: #303133;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 4px;
}

/* 搜索区域 */
.search-section {
  margin-bottom: 24px;
}

.search-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.search-form {
  margin: 0;
}

.search-btn, .reset-btn {
  border-radius: 8px;
  padding: 8px 20px;
}

/* 表格区域 */
.table-section {
  margin-bottom: 24px;
}

.table-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #ebeef5;
  background: #fafafa;
}

.table-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.table-actions .el-button {
  border-radius: 6px;
  padding: 8px 16px;
}

.table-actions .el-button--danger {
  background: linear-gradient(135deg, #f56c6c, #f78989);
  border: none;
  transition: all 0.3s ease;
}

.table-actions .el-button--danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.4);
}

.table-actions .el-button--danger:disabled {
  background: #c0c4cc;
  transform: none;
  box-shadow: none;
}

.table-actions .el-button--info {
  background: linear-gradient(135deg, #909399, #c0c4cc);
  border: none;
  transition: all 0.3s ease;
}

.table-actions .el-button--info:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(144, 147, 153, 0.4);
}

.table-actions .el-button--info:disabled {
  background: #c0c4cc;
  transform: none;
  box-shadow: none;
}

.banner-table {
  border: none;
}

.banner-table :deep(.el-table__header) {
  background: #f8f9fa;
}

.banner-table :deep(.el-table__row:hover) {
  background: #f5f7fa;
}

/* 图片单元格 */
.image-cell {
  position: relative;
  display: inline-block;
}

.banner-image {
  width: 100px;
  height: 60px;
  border-radius: 8px;
  border: 2px solid #ebeef5;
  transition: all 0.3s ease;
}

.banner-image:hover {
  border-color: #409eff;
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-cell:hover .image-overlay {
  opacity: 1;
}

.image-error {
  width: 100px;
  height: 60px;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c0c4cc;
  font-size: 24px;
  border-radius: 8px;
}

/* 标题单元格 */
.title-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.title-text {
  font-weight: 500;
  color: #303133;
}

.description-tag {
  align-self: flex-start;
}

/* 跳转类型标签 */
.link-type-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
}

/* 时间单元格 */
.time-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.time-text {
  font-size: 13px;
  color: #303133;
}

.time-diff {
  font-size: 11px;
  color: #909399;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.edit-btn, .delete-btn {
  border-radius: 6px;
  padding: 6px 12px;
}

/* 分页 */
.pagination-wrapper {
  padding: 20px 24px;
  border-top: 1px solid #ebeef5;
  background: #fafafa;
}

.pagination {
  display: flex;
  justify-content: center;
}

/* 对话框 */
.banner-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px 12px 0 0;
}

.banner-dialog :deep(.el-dialog__title) {
  color: white;
  font-weight: 600;
}

.banner-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
  color: white;
}

.banner-form {
  padding: 20px 0;
}

.form-section {
  margin-bottom: 32px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.section-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title::before {
  content: '';
  width: 4px;
  height: 16px;
  background: #409eff;
  border-radius: 2px;
}

/* 状态图标 */
.status-icon {
  margin-right: 4px;
}

.status-icon.active {
  color: #67c23a;
}

.status-icon.inactive {
  color: #f56c6c;
}

/* 链接类型图标 */
.link-icon {
  margin-right: 4px;
}

.link-icon.product {
  color: #67c23a;
}

.link-icon.category {
  color: #e6a23c;
}

.link-icon.url {
  color: #409eff;
}

/* 对话框底部 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 0 0 0;
  border-top: 1px solid #ebeef5;
}

/* 图片上传样式 - 这些样式将被 ImageUploadCropper 接管 */
.image-upload-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.image-uploader {
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.image-uploader:hover {
  border-color: #409eff;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #8c939d;
}

.upload-icon {
  font-size: 28px;
  color: #8c939d;
  margin-bottom: 8px;
}

.upload-text {
  font-size: 16px;
  margin-bottom: 4px;
}

.upload-hint {
  font-size: 12px;
  color: #c0c4cc;
}

.image-preview {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.image-preview:hover .preview-image {
  transform: scale(1.05);
}

.image-preview .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-preview:hover .image-overlay {
  opacity: 1;
}

.image-preview .upload-icon {
  color: white;
  font-size: 24px;
}

.image-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .banners-view {
    padding: 16px;
  }
  
  .header-content {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .search-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .search-form .el-form-item {
    margin-bottom: 0;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stat-card, .search-card, .table-card {
  animation: fadeInUp 0.6s ease-out;
}

.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
</style> 